<template>
    <div class="head">
        <div class="left">
            <ul>
                <li class="li_0"><a href=""><h4>码上学习</h4></a></li>
                <li class="li_1"><a href="">博客</a></li>
                <li class="li_2"><a  @click="toProblems()">题库</a></li>
                <li class="li_3"><a @click="toRank()">排行</a></li>
                <li class="li_4"><a @click="toNavigation()">导航</a></li>
            </ul>
        </div>
            <div class="information">
                <div class="img-box"  v-if="userifon">
                    <img :src="userHead" alt="">
                    <div class="menu" style="display: flex;   text-align: center;">  
                        <span style="position: absolute; top: 60px; text-align: center; width: 100%;">{{userName}}</span>
                        <span style="position: absolute; top: 100px; right: 18%; text-align: center; width: 100%;">{{ attentionNum }}</span> <span style="position: absolute; top: 112px; right: 18%; text-align: center; width: 100%;">关注</span>
                        <span style="position: absolute; top: 100px; right: -15%; text-align: center; width: 100%;">{{ fansNum }}</span> <span style="position: absolute; top: 112px; right: -15%; text-align: center; width: 100%;">粉丝</span>
                        <div class="selfSpace">
                            <a @click="toAttention()">
                                <i class="el-icon-user" style="height: 30px;"></i>
                             <span style="margin-left: 10px;">我的关注</span>
                            </a>
                        </div>
                        <div class="ArticleManagement">
                            <a @click="topersonalCenter()">
                                <i class="el-icon-reading"></i>
                                <span style="margin-left: 10px;">文章管理</span>
                             </a>
                        </div>
                        <div class="personalSetting">
                            <a @click="toSet()">
                                <i class="el-icon-s-home"></i>
                                <span style="margin-left: 10px;">个人设置</span>
                            </a>
                        </div>
                        <div class="quit">
                        <a style="border: 6px;">
                            <i class="el-icon-switch-button"></i>
                            <span style="margin-left: 10px;" @click="quit()">退出</span>
                        </a>
                        </div>
                    </div>
                </div>
                <div class="login_btn" v-if="loginbtn" style="margin: 5.4px;" @click="Pop_up()">
                    <el-button type="primary">登录</el-button>
                </div>
                <div :class="{alert_1: one,alert_2: two}">
                    <div class="alert-body">
                        <div class="alert-title">
                            &nbsp;
                            <div class="close" @click="close_pop()">x</div>
                        </div>
                        <div class="alert-content">
                            <form  id ="login" method="post" class="login">
                                    <h6>邮箱/手机号</h6>
                                    <input type="text" id="useremile" v-model="useremile" class="username_ipt" >
                                    <h6>密码</h6>
                                    <input type="password" id="password" v-model="password" class="password_ipt">
                            </form>
                        </div>
                        <div>
                            <span style="color: red;">{{ jieguo }}</span>
                        </div>
                            <router-link to="/login" style="font-size: 4px; margin-right: 26px;">点击跳转注册账号</router-link>
                            <router-link to="/forgetpwd" style="font-size: 4px;">忘记密码？</router-link> <br>
                            <button class="login_up" id="login_up" @click="login()">登录</button>
                    </div>
                </div>
            </div>
        <div class="right">
            <ul>
                <li class="li_5"><a @click="toMessage()">消息</a></li>
                <li class="li_6"><a @click="toCollect()">收藏</a></li>
            </ul>
            <div  class="right_btn">
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="toArticle()" round>发布</el-button>
            </div>
        </div>

    </div>
    

</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            one :true,
            two: false,
            useremile: '',
            password: '',
            userifon: '',
            loginbtn:'',
            userHead:'',
            userName:localStorage.getItem("username"),
            fansNum:Number,
            attentionNum:Number,
            jieguo:"",
        }
    },
    mounted:function(){
            this.getloginbtn();
    },
    methods:{
        Pop_up(){
            this.one=false;
            this.two=true;
        },
        close_pop(){
            this.one=true;
            this.two=false;
        },
        getloginbtn(){
        if(localStorage.getItem("user_Token")==null){
            this.userifon=false;
            this.loginbtn=true;
        }else{
          axios.post('/parseToken',
          {user_token : localStorage.getItem("user_Token")}).then(
            response =>{
            this.attentionNum=response.data.AttentionNum;
            this.fansNum=response.data.fansNum;
            if(response.data.isExpire==true){
                this.userifon=true;
                this.loginbtn=false;
                this.getUserHead();
            }else{
                this.userifon=false;
                this.loginbtn=true;
            }
            },
          )
        }
        },
        getUserHead(){
          axios.post('/getUserHead',
          {user_token : localStorage.getItem("user_Token")}).then(
            response =>{
                this.userHead=response.data
            },
          )
        },
        login(){    
            //登录方法
            axios.post('/login', {
                useremile: this.useremile,
                userPwd: this.password,
            })
             .then( response=> {
              if(response.data.jieguo==null){
              localStorage.setItem("user_Token",response.data.user_Token)
              this.userHead=response.data.userHead;
              this.attentionNum=response.data.AttentionNum;
              this.fansNum=response.data.fansNum;
              this.userName=response.data.userName;
              localStorage.setItem("username",response.data.userName)
              this.userifon=true;
              this.loginbtn=false;
              this.one=true;
              this.two=false;
            }else{
                this.jieguo=response.data.jieguo
            }

            })

        },
        quit(){
            localStorage.removeItem("user_Token")
            localStorage.removeItem("username")
            this.userifon=false;
            this.loginbtn=true;
            this.$message({
                message: '成功退出',
                type: 'success'
                });
            this.$router.push("/")
        },

        //跳转到消息界面
        toMessage(){
        if(localStorage.getItem("user_Token")==null){
            this.one=false;
            this.two=true;
        }else{
          axios.post('/parseToken',
          {user_token : localStorage.getItem("user_Token")}).then(
            response =>{
            if(response.data.isExpire==true){
              this.$router.push({path:"/message",query:{username:localStorage.getItem("username"),userHead:this.userHead}})
            }else{
                localStorage.removeItem("user_Token")
                this.one=false;
                this.two=true;
            }
            },
          )
        }
        },

        //跳转到收藏界面
        toCollect(){
        if(localStorage.getItem("user_Token")==null){
            this.one=false;
            this.two=true;
        }else{
          axios.post('/parseToken',
          {user_token : localStorage.getItem("user_Token")}).then(
            response =>{
            if(response.data.isExpire==true){
              this.$router.push("/collect")
            }else{
                localStorage.removeItem("user_Token")
                this.one=false;
                this.two=true;
            }
            },
          )
        }
        },

        //跳转到发布界面
        toArticle(){
        if(localStorage.getItem("user_Token")==null){
            this.one=false;
            this.two=true;
        }else{
          axios.post('/parseToken',
          {user_token : localStorage.getItem("user_Token")}).then(
            response =>{
            if(response.data.isExpire==true){
              this.$router.push({path:"/publish_Article",query:{fabuorxiugai:true}})
            }else{
                localStorage.removeItem("user_Token")
                this.one=false;
                this.two=true;
            }
            },
          )}
        },

        //跳转到个人中心
        topersonalCenter(){
            this.$router.push("/personalCenter")
        },
        toAttention(){
            this.$router.push("/attention")
        },
        toProblems(){
            this.$router.push("/problems")
        },
        toRank(){
            this.$router.push("/rank")
        },
        toSet(){
            this.$router.push("/Set")
        },
        toNavigation(){
            this.$router.push("/navigation")
        }
    }
    
}
</script>

<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    body{
        background-color: #eff3f5;
    }
    .head{
        display: block;
        border-bottom: #d2d2d2 solid 2px;
        z-index: 1;
    }
    .left ul li{
        height: 50px;
        display: flex;
        float: left;
    }
    .right ul li{
        height: 50px;
        display: flex;
        float: right;
    }
    .el-button{
        position: absolute;
        right: 3%;
    }
    .el-button.is-round{
        margin: 5.4px;
    }
    li a{
        display: block;
        text-decoration: none;
        padding: 10px;
        color: #000;
        text-align: center;
    }
    li a:hover{
        background-color: #eff3f5;
        opacity: 1;
    }
    .li_0{
        position: absolute;
        top: px;
        left: px;
    }
    .li_1{
        position: absolute;
        left: 90px;
    }
    .li_2{
        position: absolute;
        left: 160px;
    }
    .li_3{
        position: absolute;
        left: 230px;
    }
    .li_4{
        position: absolute;
        left: 300px;
    }
    .li_5{
        position: absolute;
        right: 13%;
    }
    .li_6{
        position: absolute;
        right: 9.5%;
    }

    .head{
        width: 100%;
        height: 50px;
        position: absolute;
        top: 0;
        background-color: rgb(255, 255, 255);
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .information{
    width: 100px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 16%;
   }
   .img-box{
    width: 50px;
    height: 50px;
    position: relative;
    border-radius: 50%;
    cursor: pointer;
    transition: .4s;
   }
   .img-box img{
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    z-index: 1;
   }
   .img-box:hover{
    width: 100px;
    height: 100px;
   }
   .img-box:hover .menu{
    opacity: 1;
    width: 260px;
    height: 330px;
   }
   .menu{
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    border:#d7d7d7 solid 1.3px;
    opacity: 0;
    transition: .3s;
   }
   .username_ipt{
    display: block;
    outline: none;
    width: 100%;
    height: 30px;
    border: none;
    font-size: 17px;
    border-bottom: 2px solid #78cbfa;
    margin-bottom: 80px;
   }
   .password_ipt{
    display: block;
    outline: none;
    width: 100%;
    height: 30px;
    border: none;
    font-size: 17px;
    border-bottom: 2px solid #78cbfa;
    margin-bottom: 80px;
   }
   .login_up{
    width: 80px; 
    height: 45px; 
    background-color: #78cbfa; 
    border: none; 
    border-radius: 8px; 
    color: #fff;
   }
   .selfSpace{
    display: block;
    position: absolute;
    top: 150px;
    width: 100%;
   }
   .ArticleManagement{
    display: block;
    position: absolute;
    top: 180px;
    width: 100%;
   }
   .personalSetting{
    display: block;
    position: absolute;
    top: 210px;
    width: 100%;
   }
   .quit{
    display: block;
    position: absolute;
    border-top: #d7d7d7 solid 1px;
    height: 30px;
    top: 250px;
    width: 100%;
   }
   /* 遮罩层 */
   .alert_1{
            display: none;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            background: rgba(0,0,0,.4);
            position: fixed;
            top:0;
            left: 0;
    }
    .alert_2{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
            background: rgba(0,0,0,.4);
            position: fixed;
            top:0;
            left: 0;
    }
        .alert-body{
            width: 400px;
            height: 500px;
            background-color: #fff;
            border-radius: 10px;
            font-size: 30px;
            color: #000;
            text-align: center;       
            animation: moveFromBottom .3s linear;     
        }
        .alert-title{
            line-height: 100px;
            font-size: 40px;
            position: relative;
        }
        .close{
            width: 15px;
            height: 15px;
            font-size: 23px;
            line-height: 40px;
            position: absolute;
            top: 0px; 
            right: 0px;
            margin: 15px;
            cursor: pointer;
        }
        .close:hover{
            color: red;
        }
        .alert-content{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 270px;
        }
        @keyframes moveFromTop{
            0%{
                margin-top: -600px;
            }
            100%{
                margin-top: 0;
            }
        }
        @keyframes moveFromBottom{
            0%{
                margin-bottom: -600px;
            }
            100%{
                margin-bottom: 0;
            }
        }
</style>